﻿<script src="~/res/assets/plugins/bootstrap-treeview-master/dist/bootstrap-treeview.min.js"></script>

<div id="demo">
    <div class="row">

        <div class="col-12">
            <div class="card">
                <div class="card-body">

                    <form class="form-inline">
                        <div class="form-group">
                            <label class="mx-sm-2">仓库</label>
                            <select class="form-control" v-model="likeList.TBW_DID">
                                <option value="0" selected>全部仓库</option>
                                <option v-for="y in WarehouseList" :value="y.TBW_DID">{{y.TBW_NAME}}</option>
                            </select>

                            <label class="form-Newlable">商品分类</label>
                            <div>
                                <input data-toggle="dropdown" type="text" class="form-control mx-sm-2  custom-select" id="Tree" name="商品分类" v-model="likeList.TBC_NAME" />
                                <ul class="dropdown-menu col-9" role="menu" aria-labelledby="dLabel" style="border:none;width: 228px;">
                                    <li>
                                        <div id="TreeLike" style="margin-top:-9px;margin-bottom:-9px;max-height: 340px;overflow-y: auto;"></div>
                                    </li>
                                </ul>
                            </div>

                            <label for="inputPassword6" class="form-Newlable">名称/规格</label>
                            <input type="text" id="inputPassword6" class="form-control mx-sm-2" v-model="likeList.NAME_SPEC">

                            <input type="checkbox" id="NCheck" v-model="likeList.NCheck">
                            <label class="mx-sm-2" for="NCheck">非零库存</label>

                            <button type="button" class="btn waves-effect waves-light btn-success " v-on:click="Query"><i class="fa fa-search"></i> 查询</button>
                        </div>
                    </form>

                    <p />
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>仓库</th>
                                    <th>商品分类</th>
                                    <th>商品名称</th>
                                    <th>商品规格</th>
                                    <th>计量单位</th>
                                    <th>库存数量</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="x in UserList">
                                    <td>{{x.TBW_NAME}}</td>
                                    <td>{{x.TBC_NAME}}</td>
                                    <td>{{x.TBG_NAME}}</td>
                                    <td>{{x.TBG_SPEC}}</td>
                                    <td>{{x.TBG_NUIT}}</td>
                                    <td>{{x.TWID_NUM}}</td>
                                </tr>

                                <tr v-if="UserList.length == 0">
                                    <td colspan="6" style="text-align:center"><h4>暂无数据</h4></td>
                                </tr>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

    </div>



</div>



<script type="text/javascript">

    var vm = new Vue({
        el: "#demo",
        data: {
            likeList: { TBW_DID: 0, TBC_NAME: "", NAME_SPEC: "", NCheck: true },
            WarehouseList: [],
            UserList: []
        },
        mounted: function () {

            var _self = this;

            $.post("../Essential/Warehouse?act=data",
                function (data) {
                    data = JSON.parse(data);
                    for (var i = 0; i < data.data.length; i++) {
                        _self.WarehouseList.push(data.data[i]);
                    }
                });

            $("ul.dropdown-menu").on("click", function (e) {
                e.stopPropagation();
            });

            _self.UserList = [];
            $.post("../Essential/Categories?act=data",
                function (TreeData) {
                    TreeData = JSON.parse(TreeData);
                    TreeData = eval('([' + TreeData.data + '])');

                    $('#TreeLike').treeview({
                        levels: 1,
                        selectedBackColor: "#03a9f3",
                        onhoverColor: "rgba(0, 0, 0, 0.05)",
                        expandIcon: 'ti-plus',
                        collapseIcon: 'ti-minus',
                        nodeIcon: 'fa fa-folder',
                        showTags: true,
                        showHtml: false,
                        data: TreeData,
                        onNodeSelected: function (event, data) {
                            vm.likeList.TBC_NAME = data.text;
                        },
                        onNodeUnchecked: function (event, data) {
                            alert(123);
                        }
                    });

                });


            this.Query();
        },
        methods: {
            Query: function () {
                $(".preloader").fadeIn();//加载等待
                var _self = this;
                _self.UserList = [];
                $.post("../wms/StockInfo?act=data", this.likeList,
                    function (data) {
                        data = JSON.parse(data);
                        for (var i = 0; i < data.data.length; i++) {
                            _self.UserList.push(data.data[i]);
                        }
                        $(".preloader").fadeOut();//取消加载等待
                    });
            }
        }
    });
</script>
